<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <style>
        html,body,#app{
            padding: 0px;
            margin: 0px;
            height: 100%;
        }
        .home-container{
            height: 100%;
        }
        .el-header {
            background-color: palegoldenrod;
            display: flex;
            justify-content: space-between;
            padding-left: 0px;
            align-items: center;
            color: white;
            font-size: 20px;

        }

        .el-header > div {
            display: flex;
            align-items: center;

        }

        .el-header > div > span {
            margin-left: 15px;
        }

        .el-aside {
            background-color: #333744;

        }

        .el-aside > .el-menu {
            border-right: none;
            font-size: 12px;
        }
        .el-main{
            background-color: #f1f1f1;
        }
    </style>

</head>
<body>
   <div id="app">
       <el-container  class="home-container">
           <el-header>
               头部
           </el-header>
           <el-container>
               <el-aside width="200px">
                   <!-- 侧边栏菜单 -->
                   <el-menu
                           background-color="#333744"
                           :unique-opened="true"
                           text-color="#fff"
                           active-text-color="#ffd04b"
                           router
                   >
                       <!-- 一级菜单 index就是跳转路径-->
                       <el-submenu :index="first.id" v-for="first in leftMenu">
                           <!-- 一级菜单模板 -->
                           <template slot="title">
                               <!-- 文本 -->
                               <span :class="first.icon" style="font-size: 15px;">&nbsp;&nbsp;{{first.name}}</span>
                           </template>
                           <!-- 二级子菜单 -->
                           <!-- 二级子菜单 -->
                           <el-menu-item :index="second.path" v-for="second in first.children">
                               <!-- 二级菜单模板 -->
                               <template slot="title">
                                   <!-- 图标 -->
                                   <!-- 文本 -->
                                   <a :href="second.path" target="main"><span :class="second.icon"  style="font-size: 15px;">{{second.name}}</span></a>
                               </template>
                           </el-menu-item>
                       </el-submenu>
                   </el-menu>
               </el-aside>
               <el-main>
                    <iframe src="" name="main" height="100%" width="100%" frameborder="no"></iframe>
               </el-main>
           </el-container>
       </el-container>
   </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
          data:{
               leftMenu:[],
          },
          created(){
             this.initLeftMenu();
          },
          methods:{
               initLeftMenu(){
                   axios.get("/system/permission/left").then(result=>{
                       this.leftMenu=result.data.data;
                   })
               }
          }

     })
</script>
</html>